<template>
  <div class="withdrawalinfo">
    <!-- <Header-Comp title="结算信息" /> privateoShow-->
    <van-nav-bar title="提现设置" fixed left-arrow placeholder right-text @click-left="onclickleft" />
    <van-field label-width="120px" label="提现模式" input-align="right" readonly>
      <template #input>
        <span style="color:#c7c7c7;margin-right:5px;">{{txType}}</span>
        <van-icon name="arrow-up" @click="toggle" v-if="iscollapse" />
        <van-icon name="arrow-down" @click="toggle" v-else />
      </template>
    </van-field>

    <div v-if="iscollapse">
      <van-radio-group :value="checked">
        <van-field label-width="250px" input-align="right" readonly>
          <div slot="label" class="flex">
            <span class="filed-label">自动提现</span>
            <span style="color:#c7c7c7;">系统每日定时对您的收款资金发起提现</span>
          </div>
          <template #input>
            <span
              v-if="autoChange"
              style="height: 30px;border-radius: 20px;margin-top: 12px; color:#c7c7c7;margin-right:15px;"
            >{{autoChange}}</span>
            <van-radio
              v-else
              name="auto"
              checked-color="#F59A23"
              icon-size="20px"
              style="margin-right:25px;padding-top:15px;"
              @click="withdrawal('自动提现',2)"
            />
          </template>
        </van-field>

        <van-field label-width="240px" input-align="right" readonly>
          <div slot="label" class="flex">
            <span class="filed-label">手动提现</span>
            <span style="color:#c7c7c7;">您可随时随地按需对收款资金进行提现</span>
          </div>
          <template #input>
            <van-button
              v-if="txState === '申请开通'"
              block
              type="info"
              color="#F59A23"
              style="height: 30px;border-radius: 20px;margin-top: 9px; font-size:13px;"
              @click="handleApply"
            >{{txState}}</van-button>
            <span
              v-else-if="manualChange"
              style="height: 30px;border-radius: 20px;margin-top: 12px; color:#c7c7c7;margin-right:15px;"
            >{{manualChange}}</span>
            <van-radio
              v-else-if="txState === '开通成功'"
              name="manual"
              checked-color="#F59A23"
              icon-size="20px"
              style="margin-right:25px;padding-top:15px;"
              @click="withdrawal('手动提现',1)"
            />
            <span
              v-else
              style="height: 30px;border-radius: 20px;margin-top: 12px; color:#c7c7c7;margin-right:15px;"
            >{{txState}}</span>
          </template>
        </van-field>
      </van-radio-group>
    </div>
  </div>
</template>

<script>
import {
  applyOpen,
  getMerchChannelwalletInfo,
  txSwitch,
  getTxState,
  getManualTxState
} from "@/api/mreinfo";
import { pageJump } from "@/utils/utils";
export default {
  components: {
    HeaderComp: () => import("@/components/HeaderComp")
  },
  data() {
    return {
      txType: "",
      checked: "",
      iscollapse: true,
      txState: "",
      balanceAmount: 0,
      autoChange: "",
      manualChange: "",
      manualTxState: ""
    };
  },
  created() {
    this.initFun();
  },

  //方法集合
  methods: {
    onclickleft() {
      this.$router.go(-1);
    },
    toggle() {
      this.iscollapse = !this.iscollapse;
    },
    handleApply() {
      this.$dialog
        .confirm({
          message: `<div style="font-size:16px;line-height:12px;">
                <p>确定开通手动提现功能？</p> </div>`,
          cancelButtonText: "取消",
          // cancelButtonColor: "#FFB72F",
          confirmButtonText: "确认",
          confirmButtonColor: "#F59A23"
        })
        .then(() => {
          this.$toast({
            type: "loading",
            message: "正在提交...",
            forbidClick: true,
            duration: 0
          });
          applyOpen()
            .then(res => {
              this.$toast.clear();
              if (res.code == 200) {
                this.txState = "申请中";
                this.$toast({
                  type: "success",
                  message: "操作成功",
                  duration: 1500
                });
              } else {
                this.$toast({
                  message: res.msg || "操作失败",
                  duration: 2000,
                  forbidClick: true
                });
              }
            })
            .catch(err => {
              this.$toast.clear();
              document.title = "返回APP";
            });
        })
        .catch(() => {
          // 取消
          // document.title = "返回APP";
          // next();
        });
    },

    withdrawal(status, type) {
      getMerchChannelwalletInfo().then(res => {
        if (this.txState === "申请开通" || this.txState === "申请中") {
          this.checked = "auto";
        } else if (
          this.autoChange !== "切换中" &&
          this.manualChange !== "切换中"
        ) {
          // if (
          //   res.data.balanceAmount === "" ||
          //   Number(res.data.balanceAmount) === 0.0 ||
          //   Number(res.data.balanceAmount) === 0
          // ) {
          this.$dialog
            .confirm({
              message: `<div style="font-size:16px;line-height:12px;">
                <p>确定切换为${status}？</p> </div>`,
              cancelButtonText: "取消",
              // cancelButtonColor: "#FFB72F",
              confirmButtonText: "确认",
              confirmButtonColor: "#F59A23"
            })
            .then(() => {
              this.$toast({
                type: "loading",
                message: "正在切换...",
                forbidClick: true,
                duration: 0
              });
              txSwitch(type).then(result => {
                this.$toast.clear();
                if (result.code == 200) {
                  if (status === "手动提现") {
                    this.autoChange = "";
                    this.manualChange = "切换中";
                    this.checked = "auto";
                  } else {
                    this.autoChange = "切换中";
                    this.manualChange = "";
                    this.checked = "manual";
                  }
                  this.$toast({
                    type: "success",
                    message: "切换成功",
                    duration: 1500
                  });
                } else {
                  this.$toast({
                    message: result.msg || "切换失败",
                    duration: 2000,
                    forbidClick: true
                  });
                  if (status === "手动提现") {
                    this.checked = "auto";
                  } else {
                    this.checked = "manual";
                  }
                }
                this.initFun();
              });
            })
            .catch(() => {
              if (status === "手动提现") {
                this.checked = "auto";
              } else {
                this.checked = "manual";
              }
            });
          // }
          // else {
          //   this.$dialog
          //     .confirm({
          //       message: `<div style="font-size:16px;line-height:12px;">
          //       <p>请提现全部账户余额</p> </div>`,
          //       cancelButtonText: "取消",
          //       // cancelButtonColor: "#FFB72F",
          //       confirmButtonText: "确认",
          //       confirmButtonColor: "#F59A23"
          //     })
          //     .then(() => {
          //       //跳转到收款账户
          //       pageJump();
          //       this.$toast.clear();
          //     })
          //     .catch(() => {
          //       if (status === "手动提现") {
          //         this.checked = "auto";
          //       } else {
          //         this.checked = "manual";
          //       }
          //     });
          // }
        }
      });
    },
    initFun() {
      getManualTxState().then(({ data }) => {
        switch (data) {
          case 0:
            this.txType = "自动提现";
            this.manualTxState = "未开通";
            this.checked = "auto";
            break;
          case 1:
            this.txType = "自动提现";
            this.manualTxState = "审核中";
            this.checked = "auto";
            break;
          case 2:
            this.txType = "手动提现";
            this.manualTxState = "开通成功";
            this.checked = "manual";
            break;
          case 3:
            this.txType = "自动提现";
            this.manualTxState = "开通失败";
            this.checked = "auto";
            break;
          case 4:
            this.txType = "自动提现";
            this.manualTxState = "已关闭";
            this.checked = "auto";
            break;
          case 5:
            this.txType = "自动提现";
            this.manualTxState = "未开启";
            this.checked = "auto";
        }
        if (this.manualTxState) {
          switch (this.manualTxState) {
            case "未开通":
              this.txState = "申请开通";
              break;
            case "审核中":
              this.txState = "申请中";
              break;
            case "开通成功":
            case "已关闭":
              this.txState = "开通成功";
              break;
            case "开通失败":
              this.txState = "申请开通";
              break;
          }
        }
        if (this.txState === "开通成功") {
          getTxState().then(res => {
            if (res.code === 200) {
              if (res.data === 1 && this.txType === "手动提现") {
                this.autoChange = "";
                this.manualChange = "切换中";
                this.checked = "auto";
              } else if (res.data === 1 && this.txType === "自动提现") {
                this.manualChange = "";
                this.autoChange = "切换中";
                this.checked = "manual";
              } else if (res.data === 0 && this.txType === "手动提现") {
                this.checked = "manual";
              } else if (res.data === 0 && this.txType === "自动提现") {
                this.checked = "auto";
              }
            }
          });
        }
      });
    }
  }
};
</script>
<style lang='less' scoped>
.withdrawalinfo {
  background-color: #f7f7f7;
  height: 100vh;
  .withdrawalText {
    background-color: #ffffff;
    font-size: 30px;
    padding-top: 80px;
    text-align: center;
    letter-spacing: 1px;
  }
  .comfirm {
    padding: 50px 250px 80px 250px;
    font-size: 12px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 98;
    background: #fff;
  }
  .flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .radioList {
    padding-top: 25px;
  }
  .van-button--normal {
    padding: 0px !important;
  }
}
</style>